<template>
  <a-drawer title="订阅详情" placement="right" :closable="false" :visible="visible" @close="onClose" :destroyOnClose="true" :width="600">
    <a-descriptions :column="1" title="订阅信息">
      <a-descriptions-item label="订阅编号">{{ subscribe.subSn }}</a-descriptions-item>
      <a-descriptions-item label="订阅内容">199/年6次订阅</a-descriptions-item>
      <a-descriptions-item label="订阅状态">{{ subscribe.status | subStatus }}</a-descriptions-item>
      <a-descriptions-item label="订阅有效期"> {{ subscribe.startTime }} - {{ subscribe.endTime }} </a-descriptions-item>
      <a-descriptions-item label="订阅请求数">{{ sysSubConfig.count }}</a-descriptions-item>
    </a-descriptions>
    <div class="refund" v-if="subscribe.unsubscribeTime">
      <a-descriptions :column="1">
        <a-descriptions-item label="退订时间">{{ subscribe.unsubscribeTime }}</a-descriptions-item>
        <a-descriptions-item label="退款金额"> ¥ {{ subscribe.price }} </a-descriptions-item>
        <a-descriptions-item label="备注">{{ subscribe.memo }}</a-descriptions-item>
      </a-descriptions>
    </div>
    <a-divider dashed />
    <a-descriptions :column="1" title="顾客信息">
      <a-descriptions-item label="昵称">
        <router-link :to="`/box/customer/info/personal/${customerDetails.unionid}?blank=blank`">{{ customerDetails.nickName }}</router-link>
        <img :src="customerDetails.headUrl" alt="" class="head" />
      </a-descriptions-item>
      <a-descriptions-item label="手机号">
        {{ customerDetails.phone }}
      </a-descriptions-item>
      <a-descriptions-item label="绑定会员卡">
        {{ customerDetails.jnbyCardNo }}
      </a-descriptions-item>
      <a-descriptions-item label="会员等级">
        {{ customerDetails.viptypeName }}
      </a-descriptions-item>
      <a-descriptions-item label="服务搭配师">
        {{ detailObj.fashionerName ? detailObj.fashionerName : '未分配' }}
      </a-descriptions-item>
      <a-descriptions-item label="分类">
        {{ detailObj.categoryName }}
      </a-descriptions-item>
    </a-descriptions>
    <a-divider dashed />
    <template v-if="subscribeOrderPayList.length">
      <a-descriptions :column="1" title="支付信息" v-for="item of subscribeOrderPayList" :key="item.id">
        <a-descriptions-item label="支付金额"> ¥{{ item.payPrice }} </a-descriptions-item>
        <a-descriptions-item label="微信交易单号">{{ item.wechatOrderSn }}</a-descriptions-item>
        <a-descriptions-item label="支付状态">{{ item.status | payStatus }}</a-descriptions-item>
        <a-descriptions-item label="支付时间">{{ item.createTime }}</a-descriptions-item>
        <a-descriptions-item label="商户单号">{{ item.shopSn }}</a-descriptions-item>
        <!-- <a-descriptions-item label="赠送权益">{{}}</a-descriptions-item> -->
      </a-descriptions>
    </template>
    <template v-if="subscribeOrderRefundList.length">
      <div class="refund" v-for="item of subscribeOrderRefundList" :key="item.id">
        <a-descriptions :column="1">
          <a-descriptions-item label="退款时间">{{ item.createTime }}</a-descriptions-item>
          <a-descriptions-item label="退款金额"> ¥{{ item.payPrice }} </a-descriptions-item>
          <a-descriptions-item label="退款状态">{{ item.status | refundStatus }}</a-descriptions-item>
        </a-descriptions>
      </div>
    </template>
  </a-drawer>
</template>
<script>
import { modalMixin } from './modalMixin'
import { subscribeDetails } from '@/api/box/marketing'
export default {
  mixins: [modalMixin],
  data() {
    return {
      detailObj: {},
      customerDetails: {},
      subscribeOrderPayList: [],
      subscribeOrderRefundList: [],
      sysSubConfig: {},
      subscribe: {}
    }
  },
  filters: {
    subStatus(type) {
      if (type === 2) {
        return '已退订'
      } else if (type === 1) {
        return '已订阅'
      }
    },
    payStatus(type) {
      if (type === 2) {
        return 'xxxxx'
      } else if (type === 1) {
        return '支付成功'
      }
    },
    refundStatus(type) {
      if (type === 2) {
        return 'xxxx'
      } else if (type === 1) {
        return '退款成功'
      }
    }
  },
  methods: {
    fetchData(id) {
      let params = {
        requestData: {
          subId: this.id
        }
      }
      subscribeDetails(params).then(res => {
        if (res.code == 0) {
          this.detailObj = res.data
          this.customerDetails = res.data.customerDetails
          this.sysSubConfig = res.data.sysSubConfig
          this.subscribe = res.data.subscribe
          if (res.data.subscribeOrder && res.data.subscribeOrder.length > 0) {
            let subscribeOrder = res.data.subscribeOrder
            //  购买
            this.subscribeOrderPayList = subscribeOrder.filter(e => e.type == 0)
            // 退订
            this.subscribeOrderRefundList = subscribeOrder.filter(e => e.type == 1)
            // type 6 way 2 DY22021400000178\DY22011300000013 赠送权益
          }
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.head {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  margin-left: 12px;
}
.refund {
  border-top: 1px solid red;
  padding-top: 12px;
}
</style>

